<!---测试vue的监视属性-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue的监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <span>今天天气{{weather}}-{{X}}</span>
        <button @click = "changeWeather">切换天气</button><br/> <!--绑定事件的时候@click = "XXX" XXX可以是一些简单的计算-->
        <span>获取到a的值为：{{result.a}}</span><br/><br/> 
        <button @click = "result.a++">点击按钮让a+1</button><br/><br/> 
        <span>获取到b的值为：{{result.b}}</span><br/><br/> 
        <button @click = "result.b++">击按钮让b+1</button>

        <button @click = "result = {c:100,d:88}">击按改变result对象地址</button>
    </div>
     <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: function(){
                return {
                   isHot: true,
                   X:1,
                   result:{
                    a:100,
                    b:99
                   }
                   
                }
            },
            //当读取天气必须触发计算isHot属性的值
            computed:{
                weather:{
                    get(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                }
            },
            //当点击切换天气时必须触发修改isHot的值 
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                    this.X++
                }
            },
            watch:{
                isHot:{
                    immediate:true, //初始化的时候让handler调用一下
                    handler(newValue,oldValue){
                        console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue);
                    }
                },
                //也可以监视计算属性
                weather:{
                    handler(newValue,oldValue){
                        console.log("检测到计算属性weather的值被修改，新值为："+newValue+",旧值为："+oldValue);
                    }
                },
                //嵌套属性的监视
                'result.a':{
                    handler(newValue,oldValue){
                        console.log("检测到result.a属性的值发生修改，新值为："+newValue+",旧值为："+oldValue);
                    }
                },
                //如果监视对象本身，则监视的是整个对象指针所指的地址是否发生改变，
                result:{
                    deep:true, //开启深度监视，result对象中只要有属性发生改变，就会被监视到
                    handler(newValue,oldValue){
                        console.log("检测到result属性的值发生修改，新值为："+newValue+",旧值为："+oldValue);
                    }
                }
            }
        })
        // 写法2：
        // vm.$watch('isHot',{
        //     handler(newValue,oldValue){
        //                 console.log("检测到isHot属性的值被修改，新值为："+newValue+",旧值为："+oldValue);
        //             }
        // })
     </script>
    
</body>
</html>